<style scoped>
  .inputBar {
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
  }

  .inputBar>.inputIcon {
    width: 80px;
    height: 80px;
    /* background: linear-gradient(to bottom, #98d55c, #6ea352); */
    background-color: #ea644a;
    border-radius: 10px 0px 0px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: #333 0px 0px 10px;
  }


  .inputBar>.inputArea {
    height: 80px;
    width: 430px;
    background-color: #eee;
    border-radius: 0px 20px 20px 0px;
    box-shadow: #333 0px 0px 10px;
  }

  .inputBar>.inputArea>input {
    border-style: none;
    font-size: 30px;
    height: 80px;
    line-height: 60px;
    width: 300px;
    margin-left: 13px;
    /* margin-top: 15px; */
    background-color: #eee;
    outline: none;
  }

  .loginBtn {
    margin-top: 50px;
    width: 515px;
    height: 80px;
    /* background: linear-gradient(to bottom, #98d55c, #6ea352); */
    /* background-color: #98d55c; */
    border-radius: 0px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    /* box-shadow: #333 0px 0px 10px; */
  }
</style>
<template>

  <!--页面主体，内容区域-->
  <div class="content">
    <div class="body">
      <div class="frame">
        <div style="padding-top: 60px;padding-left: 35px">
          <div class="inputBar">
            <div class="inputIcon">
              <span class="fa fa-user-circle-o fa-2x"></span>
            </div>
            <div class="inputArea">
              <input v-model="userName" id="userName" value="" type="text" class="numkeyboard" placeholder="用户名" />
            </div>
          </div>
          <div class="inputBar">
            <div class="inputIcon">
              <span class="fa fa-keyboard-o fa-2x"></span>
            </div>
            <div class="inputArea">
              <input v-model="password" id="password" value="" type="password" class="numkeyboard" placeholder="密码" />
            </div>
          </div>
          <button class="btn btn-primary btn-lg loginBtn" @click="loginBtnClick" type="button">登录</button>
        </div>
        <button class="btn btn-danger btn-lg btn-bottom-right" @click="btnBackClickEvent" type="button">返回</button>
      </div>
    </div>
  </div>

</template>
<script>
  
  export default {
    extends: extend,
    name: "login",
    data: function () {
      return {
        pageTitle: "用户登录",
        countDownTimerMax: 100,
        userName: "",
        password: "",
      }
    },
    methods: {
      //获得条码事件
      getBarCodeEvent: function () {
        alert("fdfdfdf");
      },
      //用户登录
      loginBtnClick: function () {
        if ($.trim($("#userName").val()) == "") {
          this.$toast.error('请输入合法的用户名！');
          return;
        }
        if ($.trim($("#password").val()) == "") {
          this.$toast.error('请输入合法的用户密码！');
          return;
        }
        P_User.userLogin($.trim($("#userName").val()), $.trim($("#password").val()));
        this.layerIndex=layer.load(2);
        return;
      },
      //用户登录回调
      userLoginCallback: function (obj) {
        layer.close(this.layerIndex);
     
        if (obj.status == 1) {
          this.$toast.error(obj.message);
        } else {
          this.$parent.userInfo=obj.data;
          this.$parent.currentInfo = {
            UserId: this.$parent.userInfo.UserId,
            RoleId: this.$parent.userInfo.RoleId,
            UserRealName: this.$parent.userInfo.RealName,
            RoleName: this.$parent.userInfo.RoleName,
            Sex: this.$parent.userInfo.Sex,
            QQ: this.$parent.userInfo.QQ,
            CreateDate: this.$parent.userInfo.CreateDate,
            Mobile: this.$parent.userInfo.Mobile,
            ClientId: this.$parent.clientInfo.ClientId,
            ClientCode: this.$parent.clientInfo.ClientCode,
            CustomerId:this.$parent.clientInfo.CustomerId,
          };
          // 记录用户登录成功日志
          P_User.loginLog(JSON.stringify(this.$parent.currentInfo))
          this.go("/menu");
        }
        return;
      },
    },
    mounted: function () {
      // P_Client.supervision_start_thread()
      
      var that = this;
      window.$('.numkeyboard').keyboard(keyBordSetting);
      //挂钩jquery插件，实现条码识别
      $(document).barCodeScanerModeEnter(function (barCode) {
        that.$parent.appActive();
        that.$parent.userLoginByCode(barCode.toString());
      });
    }
  };
</script>